<html>
<head>
<link type="text/css" rel="stylesheet"
	href="http://yui.yahooapis.com/3.0.0b1/build/cssfonts/fonts-min.css" />
<script type="text/javascript"
	src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js"></script>
<link rel="StyleSheet" type="text/css" href="environmentstyles.css">
</head>
<body>
<table id="checklist_table">
	<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Description</th>
		<th># of items</th>
	</tr>
</table>
<div id="checklist_edit_div"></div>
<script type="text/javascript">
var global_yui;
var checklists = new Array();
var checklistItems;

YUI().use("datasource-io", "datasource-xmlschema", "node", function(Y) {
    global_yui = Y;
    onYUILoaded();
});

function clearEditDiv() {
	 var children = global_yui.get("#checklist_edit_div").get('children');
     if (children != null) {
    	 children.remove();
     }
}

function updateCheckListOnPage(checklistItems) {
	var tableSoFar = "<table>";
    tableSoFar += "<tr><th>Description</th><th>Environment</th></tr>";
	for (var i=0; i < checklistItems.length; i++) {
        tableSoFar += "<tr><td>"+checklistItems[i].itemdescription_description+"</td><td>"+checklistItems[i].environment_name+"</td></tr>";
	}
    global_yui.get("#checklist_edit_div").append(tableSoFar);
}

function updateCheckListsOnPage(resultObj) {
     var results = resultObj.results;
     checklists = results;
     for (var i=0; i < results.length; i++) {
         var id = results[i].id;
         var name = results[i].name;
         var description = results[i].description;
         global_yui.get("#checklist_table").append("<tr onclick=\"showCheckList('"+id+"')\"><td>"+id+"</td><td>"+name+"</td><td>"+description+"</td><td></td></tr>");
     }
}


function showCheckList(checkListId) {
    clearEditDiv();

    var myDataSource = new global_yui.DataSource.IO({source:"checklist?action=retrieve&id="+checkListId}),
    myCallback = {
        success: function(e){
        	checklistItems = e.response.results;
        	updateCheckListOnPage(checklistItems);
        },
        failure: function(e){
            alert("Could not retrieve data: " + e.error.message);
        }
    };

	myDataSource.plug({fn: global_yui.Plugin.DataSourceXMLSchema, cfg: {
    	schema: {
		resultListLocator: "item",
    	resultFields: [{key:"environment_id", locator:"environment/*[local-name() ='id']"},
        	           {key:"environment_name", locator:"environment/*[local-name() ='name']"},
            	       {key:"environment_description", locator:"environment/*[local-name() ='description']"},
            	       {key:"itemdescription_id", locator:"itemdescription/*[local-name() ='id']"},
            	       {key:"itemdescription_description", locator:"itemdescription/*[local-name() ='description']"},
                	   ]        
            	}
	}});

	myDataSource.sendRequest(null, myCallback);
}

function onYUILoaded() {
    var myDataSource = new global_yui.DataSource.IO({source:"checklist?action=retrieve"}),
        myCallback = {
            success: function(e){
                updateCheckListsOnPage(e.response);
            },
            failure: function(e){
                alert("Could not retrieve data: " + e.error.message);
            }
        };

    myDataSource.plug({fn: global_yui.Plugin.DataSourceXMLSchema, cfg: {
        schema: {
    	resultListLocator: "checklist",
        resultFields: [{key:"id", locator:"*[local-name() ='id']"},
                       {key:"name", locator:"*[local-name() ='name']"},
                       {key:"description", locator:"*[local-name() ='description']"},
                       ]        
                }
    }});

    myDataSource.sendRequest(null, myCallback);
}
</script>
</body>
</html>